import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as Actions from '../../actions/address'
import utils from '../../utils'
import MeScrollContainer from '../../components/MeScroll'
import Header from '../../components/Header'


class AddressList extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      list:[]
    }
  }

  componentDidMount(){
    let { actions} = this.props 
     actions.getAddressList()
  }


  edit(id){
    this.context.router.history.push(`/address/edit/${id}`)
  }
  delete(id){
    let {actions} =this.props 
    utils.dialog.show({
        title:'tip',
        message : 'Are you sure delete the address?',
        ok : ()=>{
          actions.delAddress({addr_id:id})
        },
        cancel:true,
        cancelCb:()=>{
         
        }

      })
    
  }
  onClick(id,e){
    let { params,actions,addressList } =this.props 
    if(params.fromPage == 'order'){
      actions.updateAddressChecked({addr_id:id})
      this.context.router.history.goBack()
    }
    e.stopPropagation()
  }
  render(){
  	let {addressList} = this.props 
    return(
        <MeScrollContainer >
          <Header title={'Your address'} leftBtn={true} leftBtnTouch={()=>{
            this.context.router.history.goBack()
          }}/>
        
          {
            addressList.length == 0?  
            <div className='common-container'>
              <div style={{'fontSize':'16px',padding:'30px 0 0','textAlign':'center'}}>no address</div>
            </div>
            :
            (<div className='address-list common-container'>
            {
              addressList.map((item,i) =>{
                return(
                  <div className={`${item.is_default==1?'address-item active':'address-item'}`} key={i} >
                    <section onClick={this.onClick.bind(this,item.addr_id)}>
                      <div className='p1'>{item.recv_name}<span className='phone'>{item.recv_mobile}</span></div>
                      <div className='p2'>{item.recv_address||''}{item.recv_area||''}{item.recv_city||''}{item.recv_province||''}{item.recv_country}</div>
                    </section>
                    <div className='p3'>
                      <div className='address-btns'>
                        <i className='iconfont icon-bianji' onClick={this.edit.bind(this,item.addr_id)}>edit</i>
                        <i className='iconfont icon-shanchu' onClick={this.delete.bind(this,item.addr_id)}>del</i>
                      </div>
                    </div>
                  </div>
                  )
              })
            }
            </div>)
        
          }
        
          <div className='bottom big-btn' onClick={this.edit.bind(this,0)}>
            <i className='iconfont icon-add'>New address</i>
          </div>

        </MeScrollContainer>
    )
  }
 
}
function mapStateToProps(state){
  return{ 
    addressList: state.addressList.toJS()
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AddressList)


